<template>
  <view>
    <mxp-popup ref="mxpPopupRef" height="500px" :toolbarOptions="{ showConfirm: false, title: '请登录后观看', height: '60px' }">
      <image style="width: 400rpx; height: 400rpx" src="/static/images/global-state/ico_g_not_login.svg" mode="scaleToFill"></image>
      <text style="margin-top: 10px; font-size: 14px; color: #666666" :style="{ color: defThemeColor.text2 }">你需要登录后才能解锁或观看本集</text>
      <mxp-button text="立即登录" :cusStyle="{ width: '200px', marginTop: '40px' }" @click="openLogin"></mxp-button>
    </mxp-popup>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import MxpPopup from '@/mxp-ui/mxp-popup/mxp-popup.vue';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';

  const mxpPopupRef = ref<InstanceType<typeof MxpPopup> | null>(null);
  /** 显示 */
  function show() {
    mxpPopupRef.value?.show();
  }

  /** 隐藏 */
  function hide() {
    mxpPopupRef.value?.hide();
  }

  /**
   * 打开登录页面
   */
  function openLogin() {
    uni.navigateTo({ url: '/pages/account/login/login' });
  }

  defineExpose({
    /** 显示 */
    show,
    /** 隐藏 */
    hide,
  });
</script>
